<template>
	<div style="background: #eee;padding: 10px;">
		<div style="margin-bottom: 10px">
			<Input v-model="groupname" placeholder="输入班组名称" style="width: 300px" clearable/>
			<Button type="primary" @click="subgroup()">添加班组</Button>
			<Button type="primary" @click="modal1 = true">添加班组成员</Button>
		</div>
		<Modal
			v-model="modal1"
			title="添加班组成员"
			:mask-closable="false"
			@on-visible-change="modalChange"
			@on-ok="ok"
			@on-cancel="cancel">
			<Row>
				<Col span="24">
					<Select ref="select" v-model="model" filterable clearable title="选择班组" placeholder="选择班组" @on-change="selectGroup">
						<Option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</Col>
			</Row>
			<br/>
			<Transfer
				:data="data1"
				:list-style="listStyle"
				:targetKeys="targetKeys1"
				:titles="['待选用户','已选用户']"
				filterable
				:filter-method="filterMethod1"
				@on-change="handleChange1">
			</Transfer>
		</Modal>
		<Table ref="table" height="600" :loading="loading" stripe border :columns="cols" :data="data"/>
		<Page ref="page" :total="count" :page-size="size" show-total show-elevator show-sizer @on-change="change" @on-page-size-change="pageChange" style="float: right;margin-top: 15px;margin-bottom: 15px"/>
	</div>
</template>
<script>
	import expandRow from './table-expand.vue';

	export default {
		components: {expandRow},
		data() {
			return {
				name: 'group_add',
				loading: true,
				modal1: false,
				cols: [
					{
						type: 'expand',
						width: 50,
						render: (h, params) => {
							return h(expandRow, {
								props: {
									row: params.row
								}
							})
						}
					},
					{
						title: '创建时间',
						sortable: true,
						key: 'create_date'
					},
					{
						title: '班组名称',
						key: 'name',
						sortable: true,
						filters: [],
						filterMethod(value, row) {
							return row.name.indexOf(value) > -1;
						}
					},
					{
						title: '班组成员数量',
						sortable: true,
						key: 'count'
					},
					{
						title: '班组制作商品数量',
						sortable: true,
						key: 'total'
					},
					{
						title: '班组制作商品总价',
						sortable: true,
						key: 'price'
					},
					{
						title: '操作',
						key: 'action',
						width: 180,
						align: 'center',
						fixed: 'right',
						render: (h, params) => {
							return h('ButtonGroup', [
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									}
								}, '添加'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									on: {
										click: () => {
											this.$router.push({path: '/group_total', query: {gid: params.row.group_id}})
										}
									}
								}, '详情')
							]);
						}
					}
				],
				data: [],
				count: 0,
				size: 15,
				tmpData: [],
				groupname: '',
				data1: [],
				targetKeys1: [],
				listStyle: {
					width: '214px',
					height: '300px'
				},
				model: [],
				groupList: []
			}
		},
		methods: {
			modalChange(status) {
				if (status === true) {
					this.getGroupInfo();
				}
			},
			handleChange1(newTargetKeys) {
				this.targetKeys1 = newTargetKeys;
			},
			filterMethod1(data, query) {
				return data.label.indexOf(query) > -1;
			},
			ok() {
				this.$http('/index/piece/doAddGroupMember', 'post', {
					gid: this.model,
					member: JSON.stringify(this.targetKeys1)
				})
					.then(res => {
						if (res.code === 0) {
							this.getGroupInfo();
							this.$Message.info('选取成功');
						} else {
							this.$Message.info('未选择班组');
						}
					});
				this.data1 = [];
				this.targetKeys1 = [];
				this.$refs.select.clearSingleSelect();
			},
			cancel() {
				this.$Message.info('取消选取');
				this.data1 = [];
				this.targetKeys1 = [];
				this.$refs.select.clearSingleSelect();
			},
			selectGroup(value) {
				this.$ajax({
					method: 'post',
					url: '/index/piece/getGroupMember',
					data: {gid: value}
				})
					.then(response => {
						this.data1 = response.data.data.unselect.map(function (k) {
							return {
								key: k.user_id,
								label: k.name
							}
						});
						this.targetKeys1 = response.data.data.select;
					})
					.catch(error => {
						console.log(error);
					});
			},
			getGroupInfo() {
				this.$ajax({
					method: 'get',
					url: '/index/piece/getGroupInfo',
				})
					.then(response => {
						this.tmpData = response.data.data;
						this.groupList = response.data.data.map(function (k) {
							return {
								value: k.group_id,
								label: k.name
							}
						});
						this.count = response.data.count;
						this.handleHistoryDate();
						this.doFilters();
						this.loading = false;
					})
					.catch(error => {
						console.log(error);
					});
			},
			handleHistoryDate() {
				if (this.count < this.size) {
					this.data = this.tmpData;
				} else {
					this.data = this.tmpData.slice(0, this.size);
				}
			},
			change(index) {
				let _start = (index - 1) * this.size;
				let _end = index * this.size;
				this.data = this.tmpData.slice(_start, _end);
			},
			pageChange(index) {
				this.size = index;
				this.handleHistoryDate();
			},
			doFilters() {
				const tmp = Array.from(new Set(this.data.map(function (k) {
					return k.name;
				})));
				this.cols[2].filters = tmp.map(function (k) {
					return {
						label: k,
						value: k
					}
				})
			},
			subgroup() {
				this.$ajax({
					method: 'post',
					url: '/index/piece/doAddGroup',
					data: {
						groupname: this.groupname
					}
				})
					.then(response => {
						if (response.data.code === 0) {
							this.groupname = "";
							this.tmpData.push(response.data.data);
							this.count = this.count + 1;
							this.handleHistoryDate();
							this.$Notice.success({
								title: response.data.msg
							});
						} else {
							this.$Notice.error({
								title: response.data.msg
							});
						}
					})
					.catch(error => {
						console.log(error);
						this.$Notice.error({
							title: '操作失败'
						});
					});
			}
		},
		created() {
			this.getGroupInfo();
		}
	}
</script>
